<template>
  <div>
    <div class="tree-page">
      <div class="asd">
        <ElScrollbar>
          <div class="tree-input" v-if="filterShow">
            <el-input
              ref="inputRef"
              v-bind="$attrs"
              v-model="input"
              :placeholder="props.placeholder"
            ></el-input>
          </div>
          <el-tree
            :props="defaultProps"
            @check-change="checkChange"
            :filter-node-method="filterNode"
            ref="tree"
            :data="props.data"
            v-bind="$attrs"
          >
          </el-tree>
        </ElScrollbar>
      </div>
      <div>s</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElTree, ElScrollbar, ElInput } from 'element-plus';
import { onMounted, useAttrs, ref, watch } from 'vue';
const $attrs = useAttrs();
const tree = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
  children: 'children',
  label: 'label'
};
/***
 * 参数说明
 * @param filterShow 是否需要搜索框
 * @param data 树组件json数据
 * **/
const props = defineProps({
  placeholder: {
    type: String,
    default: () => '请输入'
  },
  data: {
    type: Array,
    default: () => []
  },
  filterShow: {
    type: Boolean,
    default: () => true
  },
  slotShow: {
    type: Boolean,
    default: () => false
  }
});

// input 搜索框的值
interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}
const input = ref('');
watch(input, (val) => {
  tree.value!.filter(val);
});

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};

/***
 * 点击复选框事件
 * */

function checkChange(): void {
  // console.log(e, a);
}
</script>
<style scoped>
.tree-input {
  margin: 10px 8px 5px 8px;
}
.tree-page {
  height: 50vh;
  border: 1px solid rgb(214, 214, 214);
  display: flex;
}
.tree-page > div {
  flex: 1;
}

.asd {
  height: 100%;
  border-right: 1px solid rgb(214, 214, 214);
}
</style>
